<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/new_file.css" />
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/flexible.js"></script>
		<script src="js/jquery-2.2.3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		.contions>.html {
			display: none;
		}
		
		.contions>.html:first-child {
			display: block;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			var length,
				currentIndex = 0,
				interval,
				hasStarted = false, //是否已经开始轮播 
				t = 3000; //轮播时间间隔 
			length = $('.slider-panel').length;
			//将除了第一张图片隐藏 
			$('.slider-panel:not(:first)').hide();
			//将第一个slider-item设为激活状态 
			$('.slider-item:first').addClass('slider-item-selected');
			//隐藏向前、向后翻按钮 
			$('.slider-page').hide();
			//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动 
			$('.slider-panel, .slider-pre, .slider-next').hover(function() {
				stop();
				$('.slider-page').show();
			}, function() {
				$('.slider-page').hide();
				start();
			});
			$('.slider-item').hover(function(e) {
				stop();
				var preIndex = $(".slider-item").filter(".slider-item-selected").index();
				currentIndex = $(this).index();
				play(preIndex, currentIndex);
			}, function() {
				start();
			});
			$('.slider-pre').unbind('click');
			$('.slider-pre').bind('click', function() {
				pre();
			});
			$('.slider-next').unbind('click');
			$('.slider-next').bind('click', function() {
				next();
			});
			/** 
			 * 向前翻页 
			 */
			function pre() {
				var preIndex = currentIndex;
				currentIndex = (--currentIndex + length) % length;
				play(preIndex, currentIndex);
			}
			/** 
			 * 向后翻页 
			 */
			function next() {
				var preIndex = currentIndex;
				currentIndex = ++currentIndex % length;
				play(preIndex, currentIndex);
			}
			/** 
			 * 从preIndex页翻到currentIndex页 
			 * preIndex 整数，翻页的起始页 
			 * currentIndex 整数，翻到的那页 
			 */
			function play(preIndex, currentIndex) {
				$('.slider-panel').eq(preIndex).fadeOut(500)
					.parent().children().eq(currentIndex).fadeIn(1000);
				$('.slider-item').removeClass('slider-item-selected');
				$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
			}
			/** 
			 * 开始轮播 
			 */
			function start() {
				if(!hasStarted) {
					hasStarted = true;
					interval = setInterval(next, t);
				}
			}
			/** 
			 * 停止轮播 
			 */
			function stop() {
				clearInterval(interval);
				hasStarted = false;
			}
			//开始轮播 
			start();
		});
	</script>

	<body>
		<div class="box">
			<div class="head">
				<header>
					<div class="scan">
						<返回 </div>
							<span class="location">学数界</span>
							<div class="search"></div>
				</header>
				<div id="from">
					<div id="aa">
						<input type="text" name="from_1" id="from_1" placeholder="搜索" />
					</div>
					<div id="bb">
						<img class="from_img" src="img/shizhong.jpg" />
					</div>
				</div>
			</div>
				<div class="slider">
					<ul class="slider-main">
						<li class="slider-panel">
							<a href="play.html"><img class="img" alt="关注脚本之家" title="关注脚本之家" src="img/baner.jpg"></a>
						</li>
						<li class="slider-panel">
							<a href="play.html"><img class="img" alt="关注脚本之家" title="关注脚本之家" src="img/baner2.jpg"></a>
						</li>
						<li class="slider-panel">
							<a href="play.html"><img class="img" alt="关注脚本之家" title="关注脚本之家" src="img/baner.jpg"></a>
						</li>
						<li class="slider-panel">
							<a href="play.html"><img class="img" alt="关注脚本之家" title="关注脚本之家" src="img/baner2.jpg"></a>
						</li>
					</ul>
					<div class="slider-extra">
						<ul class="slider-nav">
							<li class="slider-item"></li>
							<li class="slider-item"></li>
							<li class="slider-item"></li>
							<li class="slider-item"></li>
						</ul>
						<div class="slider-page">
							<a class="slider-pre" href="javascript:;;">
								<</a>
									<a class="slider-next" href="javascript:;;">></a>
						</div>
					</div>
				</div>
				<div id="div">
					<div id="div_one">
						<div style="border: 5px solid #529ff9;color: #529ff9;" class="div1 lischeck" data-menu="0">
							必修一
						</div>
						<div class="div1" data-menu="1">
							必修二
						</div>
						<div class="div1" data-menu="2">
							必修三
						</div>
						<div class="div1" data-menu="3">
							必修四
						</div>
						<div class="div1" data-menu="4">
							必修五
						</div>
						<div class="div1" data-menu="5">
							选修一
						</div>
						<div class="div1" data-menu="6">
							选修二
						</div>
						<div class="div1" data-menu="7">
							选修三
						</div>
						<div class="div1" data-menu="8">
							选修四
						</div>
						<div class="div1" data-menu="9">
							必修一
						</div>
						<!--<div class="div1" data-menu="10">
							必修一
						</div>-->
						

					</div>
				</div>

				<!--one-->
				<div class="contions">
					<div class="html">
						<div id="yuan">
							<div id="yuan_1">
								<div id="cc" class="cc" style="background-color: #549EF7;color: #fff;">
									第一章
								</div>
								<div id="dd">
									集合
								</div>
							</div>
							<div id="yuan_1">
								<div id="cc" class="cc">
									第二章
								</div>
								<div id="dd">
									函数
								</div>
							</div>
							<div id="yuan_1">
								<div id="cc" class="cc">
									第三章
								</div>
								<div id="dd">
									指对幂
								</div>
							</div>
							<div id="yuan_1">
								<div id="cc" class="cc">
									第一章
								</div>
								<div id="dd">
									指数函数
								</div>
							</div>
							<!--<div id="yuan_1">
								<div id="cc" class="cc">
									第一章
								</div>
								<div id="dd">
									指数函数
								</div>
							</div>
							<div id="yuan_1">
								<div id="cc" class="cc">
									第一章
								</div>
								<div id="dd">
									指数函数
								</div>
							</div>
							<div id="yuan_1">
								<div id="cc" class="cc">
									第一章
								</div>
								<div id="dd">
									指数函数
								</div>
							</div>
							<div id="yuan_1">
								<div id="cc" class="cc">
									第一章
								</div>
								<div id="dd">
									指数函数
								</div>
							</div>-->

						</div>
						<div id="null">

						</div>
						<div id="click">
							<div id="click_one" lischeck data-menu="0">

								<div style="background-color:#549EF7;color: #fff;" id="click_1 " class="click_1 " data-menu="0 ">
									集合
								</div>

								<div id="click_1 " class="click_1 " data-menu="1 ">
									函数
								</div>
								<div id="click_1 " class="click_1 " data-menu="2 ">
									指对幂
								</div>
								<div id="click_1 " class="click_1 " data-menu="3 ">
									函数关系函
								</div>
								<div id="click_1 " class="click_1 " data-menu="4 ">
									函数关系函
								</div>
								<div id="click_1 " class="click_1 " data-menu="5 ">
									函数关系函
								</div>
								<div id="click_1 " class="click_1 " data-menu="6 ">
									函数关系函
								</div>
								<div id="click_1 " class="click_1 " data-menu="7 ">
									函数关系函
								</div>
								<div id="click_1 " class="click_1 " data-menu="8 ">
									函数关系函
								</div>
								<div id="click_1 " class="click_1 " data-menu="9 ">
									函数关系函
								</div>
								<div id="click_1 " class="click_1 " data-menu="10 ">
									函数关系
								</div>

							</div>
						</div>

						<div class="all">
							<b>函数关系</b>
						</div>
						<div id="video ">
							<div class="shipin_one">
								<div id="shipin_1 ">

									<!--<img class="video_img " onclick="playPause() " src="video.png " />-->
									<video id="video1 " style="margin-left: 0.333333rem;">
										<source src="video/mov_bbb.mp4 " type="video/mp4 ">
										<source src="mov_bbb.ogg " type="video/ogg "> 您的浏览器不支持 HTML5 video 标签。

									</video>

								</div>
								<div class="you">
									<p class="p1 "><span>12800</span>正在观看</p>
									<p class="p2 ">同角三角函数</p>
									<p class="p3 ">2017辽宁高考题9题</p>
								</div>
							</div>
							<div class="shipin_one">
								<div id="shipin_1 ">

									<!--<img class="video_img " onclick="playPause() " src="video.png " />-->
									<video id="video1" style="margin-left: 0.333333rem;">
										<source src="video/mov_bbb.mp4 " type="video/mp4 ">
										<source src="mov_bbb.ogg " type="video/ogg "> 您的浏览器不支持 HTML5 video 标签。

									</video>

								</div>
								<div class="you">
									<p class="p1 "><span>12800</span>正在观看</p>
									<p class="p2 ">同角三角函数</p>
									<p class="p3 ">2017辽宁高考题9题</p>
								</div>
							</div>
							<div class="shipin_one">
								<div id="shipin_1 ">

									<!--<img class="video_img " onclick="playPause() " src="video.png " />-->
									<video id="video1" style="margin-left: 0.333333rem;">
										<source src="video/mov_bbb.mp4 " type="video/mp4 ">
										<source src="mov_bbb.ogg " type="video/ogg "> 您的浏览器不支持 HTML5 video 标签。

									</video>

								</div>
								<div class="you">
									<p class="p1 "><span>12800</span>正在观看</p>
									<p class="p2 ">同角三角函数</p>
									<p class="p3 ">2017辽宁高考题9题</p>
								</div>
							</div>
							<div class="shipin_one">
								<div id="shipin_1 ">

									<!--<img class="video_img " onclick="playPause() " src="video.png " />-->
									<video id="video1" style="margin-left: 0.333333rem;">
										<source src="video/mov_bbb.mp4 " type="video/mp4 ">
										<source src="mov_bbb.ogg " type="video/ogg "> 您的浏览器不支持 HTML5 video 标签。

									</video>

								</div>
								<div class="you">
									<p class="p1 "><span>12800</span>正在观看</p>
									<p class="p2 ">同角三角函数</p>
									<p class="p3 ">2017辽宁高考题9题</p>
								</div>
							</div>

						</div>

					</div>
					<!--two-->
					<div class="html">
						<div id="yuan">
							<div id="yuan_1">
								<div id="cc">
									第一章
								</div>
								<div id="dd">
									立体几何
								</div>
							</div>
							<div id="yuan_1">
								<div id="cc">
									第二章
								</div>
								<div id="dd">
									直线和圆
								</div>
							</div>
							<div id="yuan_1">
								<div id="cc">
									第一章
								</div>
								<div id="dd">
									指数函数
								</div>
							</div>
							<div id="yuan_1">
								<div id="cc">
									第一章
								</div>
								<div id="dd">
									指数函数
								</div>
							</div>
							<!--<div id="yuan_1">
								<div id="cc">
									第一章
								</div>
								<div id="dd">
									指数函数
								</div>
							</div>
							<div id="yuan_1">
								<div id="cc">
									第一章
								</div>
								<div id="dd">
									指数函数
								</div>
							</div>
							<div id="yuan_1">
								<div id="cc">
									第一章
								</div>
								<div id="dd">
									指数函数
								</div>
							</div>
							<div id="yuan_1">
								<div id="cc">
									第一章
								</div>
								<div id="dd">
									指数函数
								</div>
							</div>-->

						</div>
						<div id="null">

						</div>
						<div id="click">
							<div id="click_one" lischeck data-menu="0">

								<div id="click_1 " class="click_1 " data-menu="0 ">
									函数关系
								</div>

								<div id="click_1 " class="click_1 " data-menu="1 ">
									函数关系
								</div>
								<div id="click_1 " class="click_1 " data-menu="2 ">
									函数关系函
								</div>
								<div id="click_1 " class="click_1 " data-menu="3 ">
									函数关系函
								</div>
								<div id="click_1 " class="click_1 " data-menu="4 ">
									函数关系函
								</div>
								<div id="click_1 " class="click_1 " data-menu="5 ">
									函数关系函
								</div>
								<div id="click_1 " class="click_1 " data-menu="6 ">
									函数关系函
								</div>
								<div id="click_1 " class="click_1 " data-menu="7 ">
									函数关系函
								</div>
								<div id="click_1 " class="click_1 " data-menu="8 ">
									函数关系函
								</div>
								<div id="click_1 " class="click_1 " data-menu="9 ">
									函数关系函
								</div>
								<div id="click_1 " class="click_1 " data-menu="10 ">
									函数关系
								</div>

							</div>
						</div>

						<div class="all">
							<b>函数关系</b>
						</div>
						<div id="video ">
							<div class="shipin_one">
								<div id="shipin_1 ">

									<!--<img class="video_img " onclick="playPause() " src="video.png " />-->
									<video id="video1 " style="margin-left: 0.333333rem;">
										<source src="video/mov_bbb.mp4 " type="video/mp4 ">
										<source src="mov_bbb.ogg " type="video/ogg "> 您的浏览器不支持 HTML5 video 标签。

									</video>

								</div>
								<div class="you">
									<p class="p1 "><span>12800</span>正在观看</p>
									<p class="p2 ">同角三角函数</p>
									<p class="p3 ">2017辽宁高考题9题</p>
								</div>
							</div>
							<div class="shipin_one">
								<div id="shipin_1 ">

									<!--<img class="video_img " onclick="playPause() " src="video.png " />-->
									<video id="video1" style="margin-left: 0.333333rem;">
										<source src="video/mov_bbb.mp4 " type="video/mp4 ">
										<source src="mov_bbb.ogg " type="video/ogg "> 您的浏览器不支持 HTML5 video 标签。

									</video>

								</div>
								<div class="you">
									<p class="p1 "><span>12800</span>正在观看</p>
									<p class="p2 ">同角三角函数</p>
									<p class="p3 ">2017辽宁高考题9题</p>
								</div>
							</div>
							<div class="shipin_one">
								<div id="shipin_1 ">

									<!--<img class="video_img " onclick="playPause() " src="video.png " />-->
									<video id="video1" style="margin-left: 0.333333rem;">
										<source src="video/mov_bbb.mp4 " type="video/mp4 ">
										<source src="mov_bbb.ogg " type="video/ogg "> 您的浏览器不支持 HTML5 video 标签。

									</video>

								</div>
								<div class="you">
									<p class="p1 "><span>12800</span>正在观看</p>
									<p class="p2 ">同角三角函数</p>
									<p class="p3 ">2017辽宁高考题9题</p>
								</div>
							</div>
							<div class="shipin_one">
								<div id="shipin_1 ">

									<!--<img class="video_img " onclick="playPause() " src="video.png " />-->
									<video id="video1" style="margin-left: 0.333333rem;">
										<source src="video/mov_bbb.mp4 " type="video/mp4 ">
										<source src="mov_bbb.ogg " type="video/ogg "> 您的浏览器不支持 HTML5 video 标签。

									</video>

								</div>
								<div class="you">
									<p class="p1 "><span>12800</span>正在观看</p>
									<p class="p2 ">同角三角函数</p>
									<p class="p3 ">2017辽宁高考题9题</p>
								</div>
							</div>

						</div>

					</div>

				</div>
                <div class="bottom ">
							<div class="bottom_one ">
								<a href="#">
									<img src="img/shouye.png " />
									<p>首页</p>
								</a>
							</div>
							<div class="bottom_one ">
								<a href="index-1.html ">
									<img class="one1 " src="img/meiriyiti.png " />
									<p>每天一题</p>
								</a>
							</div>
							<div class="bottom_one ">
								<a href="gaokaozhonghe.html">
									<img class="one1 " src="img/gaokaozonghe-1.png " />
									<p>高考综合</p>
								</a>
							</div>
							<div class="bottom_one ">
								<a href="shitiku.html">
									<img class="one2 " src="img/shitiku.png " />
									<p>试题库</p>
								</a>
							</div>
							<div class="bottom_one ">
								<a href="my.html ">
									<img src="img/wodeyemian.png " />
									<p>我的</p>
								</a>
							</div>
						</div>
			</div>
	</body>
	<script type="text/javascript">
		$(".div1").on("click", function() {
			$(this).addClass("lischeck")
				.siblings().removeClass("lischeck");

			$($(".contions").children(1)[$(this).data("menu")]).show()
				.siblings().hide();
		});
		//必修一改变背景色和文字颜色
		$(".div1").each(function() {
			$(this).click(function() {
				$(this).css("border","5px solid #529ff9");
				$(this).css("color","#529ff9");
				$(this).siblings().css("border","");
				$(this).siblings().css("color","gray");
				
			});
		});
		//yuan_1改变背景色和文字颜色
		$(".cc").each(function(){
			$(this).click(function(){
				$(this).css(
					{"background-color":"#549ef7",
						"color":"#fff"
					});
				$(this).parent().siblings().children(".cc").css({
					"color":"gray",
					"background-color":"#fff"
				});	
			});
		});
		

		//改变背景色和文字颜色
		$(".click_1").each(function() {
			$(this).click(function() {
				
				$(this).css("color","#fff");
				$(this).css("font-size","26px");
				
				$(this).siblings().css("color","gainsboro");
				$(this).siblings().css("font-size","");
			});
		});
	</script>

</html>